
<template>
  <!-- 侧边栏 精选教程 -->
  <section class="column home-right-item-wrap relative com-2-panel J-specialTopicPanel">
    <img class="w-full column-bg" src=''/>
    <div class="column-content">
      <div class="home-right-item-title absolute">
        <div class="com-2-panel-title">{{side.title}}</div>
      </div>
      <div class="home-right-item-post-list com-2-panel-bd">
        <ul class="com-2-side-topics without-margin" v-for="(item, id) in side.items" :key="id">
          <li>
            <a :href="item.url"
               class="com-media com-side-topic">
              <div class="com-media-object">
                            <span class="com-thumbnail"
                                  :style="{'background-image': 'url('+item.img+')'}">
                            </span>
              </div>
              <div class="com-media-body">
                <div class="com-side-topic-title">
                  <span class="vip-free-tag tag">限免</span>
                  <span class="column-title">
                    {{item.name}}
                  </span>
                </div>
                <div class="com-side-topic-desc">{{item.title}}</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </section>

</template>

<script setup lang="ts">

import type { SideBarItem } from '@/http/ResponseTypes/SideBarItemType'

const props = defineProps<{
  side: SideBarItem

}>()
</script>


<style scoped>

</style>
